<template>
    <el-row class="main-cont padd20">
        <!--        <el-row>
        </el-row> -->
        <el-row :gutter="20" class="padd20 box box-pack-start" style="height: calc(100% - 40px);">
            <el-col :span="24" class="box box-tb">
                <el-col class="title box box-pack-between" style="margin-bottom: 20px;">
                    <div class="btn box box-algin-center" style="padding-right:0px;">
                        <el-input @input="xtjyLdsjList()" class="ml20" placeholder="搜索" v-model="searchText">
                            <i slot="suffix" class="el-input__icon el-icon-search cp" @click="xtjyLdsjList()"></i>
                        </el-input>
                        <el-button class="reset-comfirm-btn" style="margin-left: 10px;" @click="clickAdd('')">+添加</el-button>
                    </div>
                </el-col>

                <el-col :span="24" v-if="page.list.length !=0">
                    <el-col :span="6" class="col-list cp minwith200" v-for="(item,index) in page.list" :key="index"
                        style="margin-bottom: 10px;" @click.native="goCourse(item.id)">
                        <div class="grid-content bg-purple">
                            <el-image :src="item.img"
                                onerror="https://yhykt.oss-cn-beijing.aliyuncs.com/AC5DC3A7FAE54EC8ACB2224460EC86968a9e3a8f3094a247e03cd930aa6fc67.png?Expires=4804053091&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=LAXUO1s9pze0f7jP50RWNH7RLVM%3D"
                                class="img" fit="cover">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                            </el-image>
                            <el-col class="tl tlt">
                                <span class="course-name">{{item.title.substr(0,7)}}({{item.score}}分)</span>
                                <span class="sjtype" v-if="item.type == '0'">生活</span>
                                <span class="sjtype" v-if="item.type == '1'">生产</span>
                                <span class="sjtype" v-if="item.type == '2'">服务</span>
                            </el-col>
                            <el-col class="tl tlword" style="padding: 0 30px 0 25px;font-size: 10px;height: 38px;">
                                {{item.ldmb}}
                            </el-col>
                        </div>
                    </el-col>
                </el-col>
                <el-row class="height100 box box-pack-center box-align-center" v-else>
                    <el-empty description="暂无劳动实践" image="../../../static/image/nodata/nodata.png"></el-empty>
                </el-row>
                <el-pagination @current-change="xtjyLdsjList" background layout="prev, pager, next" :total="page.total"
                    :current-page="page.pageNum" :page-size="page.pageSize" hide-on-single-page></el-pagination>
            </el-col>

        </el-row>
        <!-- <diaLogs :dialogVisible="dialogVisible" @clickClose="clickClose()" @xtjyUserList="xtjyUserList()" :title="title"
            :info="info" :jyzid="jyzid" ref="child">
        </diaLogs>
        <edit :dialogVisibles="dialogVisibles" @clickCloses="clickCloses" :titles="titles" :jyzids="jyzids" ref="fhaj">
        </edit> -->
    </el-row>
</template>

<script>
    // import edit from './components/edit.vue';
    // import diaLogs from './components/dialog.vue';
    export default {
        // components: {
        //     diaLogs,
        //     edit
        // },
        data() {
            return {
                searchText: '',
                page: {
                    total: 0,
                    pageSize: 12,
                    pageNum: 1,
                    list: []
                },
                dialogVisible: false, //添加成员
                dialogVisibles: false, //教研团队信息-----------
                courseSHow: false, //创建劳动课程
                title: "添加成员",
                titles: '教研团队信息', //----------------------
                tip: "创建劳动课程",
                info: {},
                loginInfo: this.$store.state.loginInfo,
                maxRole: this.$store.state.maxRole,
                jyzid: 0,
                jyzids: 0, //---------------------
                cyList: [],
                listsize: 0,
                addShow: false,
                schoolid: this.$store.state.schoolId,
                isIndeterminate: false,
                check: [],
                checkAll: false,
                checkedGameId: []
            };
        },
        mounted() {
            if (this.loginInfo.roleList.indexOf(4) != -1) {
                this.addShow = true;
            }
            this.getTrJyz()
        },
        methods: {
            init() {
                for (let i = 0; i < this.cyList.length; i++) {
                    this.checkedGameId.push(this.cyList[i].id);
                    console.log('>>>' + this.checkedGameId);
                    console.log(this.cyList.length)
                }
            },
            handleCheckAllChange(val) {
                this.check = val ? this.checkedGameId : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cyList.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cyList.length;
            },
            getTrJyz() {
                this.$api.Admin.getJyzData({
                    'schoolid': this.schoolid
                }).then(res => {
                    if (res.code == '0') {
                        this.jyzid = res.data;
                        this.$store.commit("setJyzid", res.data);
                        this.xtjyLdsjList();
                        this.xtjyUserList();
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            xtjyUserList() {
                this.$api.jyz.xtjyUserList({
                    'jyzid': this.jyzid
                }).then(res => {
                    if (res.code == '0') {
                        this.cyList = res.list;
                        this.init();
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            xtjyLdsjList(pageNum) {
                this.$api.jyz.xtjyLdsjList({
                    'jyzid': this.jyzid,
                    'seachText': this.searchText,
                    pageSize: this.page.pageSize,
                    pageNum: pageNum
                }).then(res => {
                    console.log(res);
                    if (res.code == '0') {
                        this.page = res.list;
                        this.listsize = res.listsize;
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            addTr() {
                this.$refs.child.listNotInJyzUser();
                this.dialogVisible = true;
            },
            clickClose() {
                this.dialogVisible = false
            },
            //编辑
            upck() {
                this.dialogVisibles = true;
            },
            clickCloses() {
                this.dialogVisibles = false;
            },
            //添加劳动实践
            clickAdd() {
                this.$router.push({
                    path: "/ldsj_jyzz/cjsj_jyzz"
                })
            },
            clickCloseCourse() {
                this.courseSHow = false
            },
            //课程详情
            goCourse(sjid) {
                this.$router.push({
                    name: "sjxq_jyzz"
                })
                localStorage.setItem('ldsjId', sjid)
            }
        }
    };
</script>

<style scoped lang="scss">
    .ym,
    .sf {
        width: 120px;
    }

    .sf {
        text-align: center;
    }

    /deep/.jy-team[data-v-580db919] {
        overflow-y: initial;
    }

    /deep/ .fofnk {
        width: 100%;
        padding-left: 12px;
        text-align: left;

        >.num {
            display: inline-block;
            font-size: 12px;
            width: 20px;
        }

        >.checkStyle {
            >.el-checkbox__input {
                padding-top: 27px;
            }
        }
    }

    /deep/.el-checkbox {
        margin-right: 0 !important;

        >.el-checkbox__input {
            padding-bottom: 30px !important;
        }
    }

    /deep/.el-checkbox__input {
        margin-bottom: 0 !important;
    }

    /deep/ .team::-webkit-scrollbar {
        height: 0 !important;
    }

    .main-cont {
        height: 100%;
    }

    .el-row {
        &:last-child {
            margin-bottom: 0;
        }
    }

    .col-list {
        border-radius: 12px;
    }

    .bg-purple {
        background-color: #fafbff;
        transition: .3s ease-in-out;
    }

    .bg-purple:hover {
        box-shadow: 2px 6px 13px 0px rgba(128, 130, 139, 0.9);
    }

    .el-plus {
        display: inline-block;
        width: 32px;
        height: 32px;
        line-height: 26px;
        background: linear-gradient(-13deg, #626BF1, #989BFA);
        border-radius: 16px;
        color: #fff;
        font-size: 26px;
        font-style: normal;
    }

    .border {
        background-color: #f8f9fc;
        color: #626BF1;
        border: 1px dotted #BEBDE6;
        min-width: 200px;
        border-radius: 12px;
        height: 240px;
        overflow: hidden;

        &:hover {
            border: 1px dotted #626bf1;
        }
    }

    .grid-content {
        min-width: 200px;
        border-radius: 12px;
        height: 220px;
        overflow: hidden;
        margin-right: 20px;

        .img {
            width: 100%;
            height: 140px;
        }

        .tlt {
            display: flex;
            justify-content: space-between;
        }

        .course-name {
            font-size: 14px;
            font-weight: bold;
            margin-left: 10px;
        }

        .createuser {
            // width: 40px;
            display: block;
            font-size: 14px;
        }

        .course-info {
            span {
                color: #888F9E;
            }
        }

    }

    .minwith200 {
        min-width: 210px;
    }

    .jy-team {
        position: relative;
        min-width: 260px;
        height: 100%;
        overflow-y: auto;
        background-color: #fff;
        box-shadow: 1px 3px 9px 0px rgba(176, 181, 191, 0.4);

        .add-btn {
            color: #626BF1;
            font-weight: 600;
            width: 65px;
            display: flex;
            justify-content: space-between;

            >.el-icon-plus {
                font-weight: 600;
            }
        }

        .user-name {
            width: 140px;

            .es-width {
                text-align: left;
                width: 80px;
                overflow: hidden;
            }
        }

        .role {
            min-width: 110px;
            text-align: center;
        }
    }

    .sjtype {
        width: 34px;
        text-align: center;
        // padding: 4px 8px 4px 8px;
        // margin-left: 30px;
        height: 24px;
        line-height: 24px;
        background: #eaebf5;
        border-radius: 9px;
        color: #5e6266;
        font-size: 12px;
    }

    .ldmb {
        padding: 0 30px 0 25px;
    }

    .tlword {
        word-break: break-all;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /* autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 2;
    }
</style>
